<template>
  <div>
    <q-btn color="primary" label="授权" @click="toAuthorize" />
    <q-btn color="primary" label="设置" @click="toSetting" />
    <q-card bordered flat>
      <div class="profile-card" v-if="userInfo.banner" :style="{ backgroundImage: `url(${userInfo.banner})` }">
      </div>
      <q-card-section class="row items-center">
        <q-avatar>
          <img :src="userInfo.avatar" />
        </q-avatar>
        <div class="q-ml-sm text-body1 text-bold">{{ userInfo.name }}</div>
        <q-chip color="primary" text-color="white" v-if="userInfo.title" dense>{{ userInfo.title }}</q-chip>
      </q-card-section>
      <q-card-section class="row items-center justify-around q-pt-none">
        <div class="column items-center">
          <div>{{ userInfo.message }}</div>
          <div>消息</div>
        </div>
        <div class="column items-center">
          <div>{{ userInfo.reaction }}</div>
          <div>获赞</div>
        </div>
        <div class="column items-center">
          <div>{{ userInfo.trophy }}</div>
          <div>成就点</div>
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<script setup>
import { toAuthorize } from '../Authorize/auth'
import { getUserInfo } from '../../utils/api'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const userInfo = reactive({
  name: '',
  avatar: '',
  banner: '',
  title: '',
  message: 0,
  reaction: 0,
  trophy: 0,
})

getUserInfo().then(res => {
  userInfo.avatar = res.me.avatar_urls.h
  userInfo.name = res.me.username
  userInfo.title = res.me.user_title
  userInfo.banner = res.me.profile_banner_urls.l
  userInfo.message = res.me.message_count
  userInfo.reaction = res.me.reaction_score 
  userInfo.trophy = res.me.trophy_points
})

const toSetting = () => {
  router.push(`/settings`)
}
</script>

<style lang="scss" scoped>
.profile-card {
  background-size: cover;
  height: 140px;
}
</style>